<template>

  <div class="add_menu_container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加菜单</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="add_menu_card">

      <!-- title -->
      <el-row class="title">
        <el-col>添加菜单</el-col>
      </el-row>

      <!-- 主体内容 -->
      <div class="menu_list_content">

        <el-form style="width: 500px;" ref="form" label-width="100px">
          <el-form-item label="上级菜单：">
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="菜单名称：">
            <el-input placeholder="请输入菜单名称"></el-input>
          </el-form-item>

          <el-form-item label="链接地址：">
            <el-input placeholder="请输入菜链接地址"></el-input>
          </el-form-item>

          <el-form-item label="图标：">
            <el-upload class="updata_icon" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="排序：">
            <el-input placeholder="请输入菜链接地址"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">保存</el-button>
            <el-button>返回</el-button>
          </el-form-item>
        </el-form>

      </div>

    </el-card>
  </div>

</template>

<script src='../../../static/js/set_up/add_menu.js'></script>

<style scoped lang='less'>
@import "../../../static/css/set_up/add_menu.less";
</style>


